<template>
        <div ref="chatcontent" class="chatcontent">
            <RecordItem v-for="item in chatRecords" :record="item"></RecordItem>
        </div>
</template>
<script setup lang="ts">
import { onMounted, ref ,watch,onUpdated} from 'vue';
import type { ChatRecord } from '@/types';
import RecordItem from '@/components/small/RecordItem.vue'
import bus from '@/bus';
const props = defineProps<{
    chatRecords:Array<ChatRecord>
}>()
const chatcontent = ref<HTMLDivElement>()
const neetScroll = ref(true)
const changeScroll = () => {
    
    setTimeout(() => {
        const div = chatcontent.value as HTMLDivElement
        if(neetScroll.value)
        div.scrollTop = div.scrollHeight
    }, 2);
}
let dematicScroll = changeScroll
onMounted(() =>{
    setTimeout(() => {
        changeScroll()
    }, 2);
    chatcontent!.value!.onscroll = (e) => {
        if(chatcontent.value?.scrollTop == 0) {
            console.log('fetch');
            bus.emit('fetchNewTenChatRecord')
            neetScroll.value = false
        }
        // console.log(chatcontent.value?.scrollTop + "->" + chatcontent.value?.scrollHeight);
        
        if((chatcontent.value?.scrollHeight as number) - (chatcontent.value?.scrollTop as number) < 500) {
            neetScroll.value = true
        }
    }
    // 创建MutationObserver实例
})
onUpdated(dematicScroll)
</script>
<style scoped>
.chatcontent{
    height: 484px;
    border-bottom: 1px solid #CCC;
    background-color: rgb(245, 245, 245);
    overflow: auto;
    display: flex;
    flex-direction: column;
}
</style>